import React, { useState, useCallback } from 'react'
import style from './modal.scss'

export const ModalBase = ({ children, onClose }) => {
    return (<div className={style['mask']}>
        <div className={style['modal_content']}>
            <button className={style['close']} onClick={onClose}>x</button>
            {children}
        </div>
    </div>)
}

export const ModalDialog = ({ title, body, onClose }) => {
    return <ModalBase onClose={onClose}>
        {title && <div className={style['title']}>{title}</div>}
        {body && <div className={style['body']}>{body}</div>}
    </ModalBase>
}

export const useShowModal = ({ show, title, body, onClose }) => {
    if (show) {
        return <ModalDialog title={title} body={body} onClose={onClose} />
    } else {
        return null
    }
}